<template>
  <div style="padding: 0.1px;">
    <n-form
      style="margin: 20px 20px 0;"
      ref="formRef"
      :label-width="80"
      label-placement="left"
      :model="formValue"
      :rules="rules"
      size="medium"
    >
      <n-form-item label="" path="name">
        <n-input v-model:value="formValue.name" placeholder="输入账号" />
      </n-form-item>
      <n-form-item label="" path="psw">
        <n-input v-model:value="formValue.psw" placeholder="输入密码" type="password" />
      </n-form-item>
    </n-form>

    <div style="margin: 0 20px 20px;">
      <n-flex justify="space-between">
        <n-button @click="toRegister">
          <img src="/src/assets/login/UI_Common_Btn_SignUp.png" style="width: 2.3rem; height: auto;" />
          注册账号
        </n-button>
        <n-button @click="toPswEdit">
          <img src="/src/assets/login/UI_Common_Btn_Lock.png" style="width: 2.3rem; height: auto;" />
          修改密码
        </n-button>
      </n-flex>
    </div>

    <div style="margin-bottom: 15px;">
      <loginBtn width="50vw" @click="login" />
    </div>

    <modal ref="modalRef" title="注册">
      <register :modalRef="modalRef" />
    </modal>

    <modal ref="modalRef2" title="修改密码">
      <editPsw :modalRef="modalRef2" />
    </modal>
  </div>
</template>

<script setup>
import { useMessage } from "naive-ui";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import loginBtn from '@/components/login-btn.vue'
import modal from '@/components/modal.vue'
import register from '@/components/register.vue'
import editPsw from '@/components/editPsw.vue'

const router = useRouter()

const formRef = ref(null);
const message = useMessage();
const modalRef = ref()
const modalRef2 = ref()

const formValue = ref({
  user: {
    name: "",
    age: ""
  },
  phone: ""
})
const rules = {
  user: {
    name: {
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    },
    age: {
      required: true,
      message: "请输入年龄",
      trigger: ["input", "blur"]
    }
  },
  phone: {
    required: true,
    message: "请输入电话号码",
    trigger: ["input"]
  }
}

function handleValidateClick(e) {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      message.success("Valid");
    } else {
      console.log(errors);
      message.error("Invalid");
    }
  });
}

function login() {
  router.replace('/index')
}

function toRegister() {
  modalRef.value.show()
}
function toPswEdit() {
  modalRef2.value.show()
}

onMounted(() => {
  
})
</script>

<style lang="scss" scoped>
:deep(.n-input) {
  // 输入框文字颜色
  .n-input__input-el {
    color: #574c89 !important;
    caret-color: #574c89; // 光标颜色
    font-weight: bold;

    // Placeholder 颜色
    ::placeholder {
      color: #574c89 !important;
      opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #574c89 !important;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
      color: #574c89 !important;
    }
  }

  // 背景颜色等其他样式保持不变
  border-radius: 2rem !important;
  background: #d1ddea;
}

// 单独设置 placeholder 颜色
:deep(.n-input .n-input__input-el::placeholder) {
  color: red!important;
  opacity: 1;
}
</style>